import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { store } from './store/store';
import LoginPage from './views/login/LoginPage';
import App from './App';
import HelveticaNeue from './fonts/HelveticaNeueCyr-Medium.woff2';
import HelveticaNeueLight from './fonts/HelveticaNeueCyr-Light.woff2';

const mainTheme = {
    
}

/**
 * Глобальные стили для приложения
 */
const GlobalStyle = createGlobalStyle`

    #root {
        @font-face {
            font-family: 'Helvetica Neue';
            src: url(${HelveticaNeue});
            font-size: 16px;
        }

        @font-face {
            font-family: 'Helvetica Neue Light';
            src: url(${HelveticaNeueLight});
            font-size: 16px;
        }

        height: 100%;
        width: 100%;

    }

    html, body {
        height: 100%;
        width: 100%;
    }

    body {
        margin: 0;
        padding: 0;

        h1 {
            font-family: 'Helvetica Neue';
            font-weight: normal;
        }
    }
`;

/**
 * Создает корневой элемент приложения.
 * @type { ReactDOM.Root }
 */
const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

/**
 * Отрисовываем приложение в корневой элемент
 */
root.render(
    // Оборачиваем приложение в Provider для подключения redux хранилища.
    <Provider store={store}>
        { /* Оборачиваем приложение в BrowserRouter для роутинга */}
        <ThemeProvider theme={mainTheme}>
        <BrowserRouter>         
            { /* Применяем глобальные стили */}
                <GlobalStyle />
                { /* Создаем маршруты приложения */}
                <Routes>
                    <Route path='/login' element={<LoginPage />} />
                    <Route path='/*' element={<App />} />
                </Routes>
            </BrowserRouter>
        </ThemeProvider>
    </Provider>
);